<style lang="less" scoped>
:deep(.h-notify-container) {
  width: 700px;
}
</style>

<template>
  <div class="table-basic-vue frame-page h-panel">
    <div class="h-panel-bar"><span class="h-panel-title">订单列表</span></div>
    <div class="h-panel-body">
      <div>
        <Tabs :datas="tabs" className="common-status-filter-tabs" v-model="status" @change="getData(true)">
          <template v-slot:item="{ tab }">
            <p class="code">{{ tab.num || 0 }}</p>
            <p class="name">{{ tab.title }}</p>
          </template>
        </Tabs>
      </div>
      <div class="common-filter-bar">
        <div class="float-left">
          <Search :width="400" v-model="keyword" @search="getData(true)" placeholder="请输入" showSearchButton></Search>
          <Space /><Space /> <Button color="green">导出订单</Button><Space />
          <Button color="blue">导入发货订单</Button>
        </div>
      </div>
      <Table :loading="loading" :datas="datas">
        <TableItem :width="200" prop="no" title="订单号"> </TableItem>
        <TableItem :width="200" prop="name" title="宝贝名称"></TableItem>
        <TableItem :width="120" title="状态">
          <template v-slot="{ data }">
            <Tag color="red" v-if="data.status == 1">待发货</Tag>
            <Tag color="blue" v-if="data.status == 2">已发货</Tag>
            <Tag color="green" v-if="data.status == 3">已完成</Tag>
            <Tag color="gray" v-if="data.status == 4">申请售后</Tag>
          </template>
        </TableItem>
        <TableItem :width="400" prop="info" title="收货信息">
          <template v-slot="{ data }"> <Space /><Button @click="copyOrderInfo(data.info)" size="xs" color="primary">复制</Button> </template>
        </TableItem>
        <TableItem :width="200" prop="createTime" title="下单时间"></TableItem>
        <TableItem :width="200" title="操作">
          <template v-slot="{ data }">
            <button class="h-btn h-btn-blue" @click="openDetail(data)" size="xs"><i class="h-icon-info"></i><span>详情</span></button>
            <button class="h-btn h-btn-yellow" @click="openEdit(data)" size="xs"><i class="h-icon-edit"></i><span>发货</span></button>
          </template>
        </TableItem>
      </Table>
      <Space :height="10" />
      <Pagination v-if="pagination.total > 0" align="right" v-model="pagination" @change="changePage" />
      <Modal v-model="openModal" :middle="true" ref="Modal" v-bind="params">
        <Form :label-width="110" :mode="mode" :model="formData" :rules="validationRules" ref="form" :top="0.2" showErrorTip>
          <FormItem label="快递公司" prop="company">
            <Select v-model="formData.company" :datas="expressCompanys"></Select>
          </FormItem>
          <FormItem label="快递单号" prop="no">
            <input type="text" v-model="formData.no" />
          </FormItem>
          <FormItem :no-padding="true" single>
            <Button color="primary" :loading="isLoading" @click="submit">提交</Button>
            <i class="h-split"></i>
            <Button @click="closeHandle">取消</Button>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>
<script>
import { clipboard } from 'heyui';
export default {
  data() {
    return {
      keyword: '',
      sort: 'updatedAt:desc',
      pagination: {
        page: 1,
        size: 20,
        total: 1
      },
      tabs: [
        { key: -1, title: '全部', num: 160 },
        { key: 1, title: '待发货', num: 10 },
        { key: 2, title: '已发货', num: 40 },
        { key: 3, title: '已完成', num: 100 },
        { key: 4, title: '待处理售后', num: 0 }
      ],
      status: -1,
      datas: [
        {
          no: 'A51515545454515',
          name: '芒果',
          status: 1,
          info: '广东省深圳市南山区西丽街道平山村 13562245546 张三',
          createTime: '2024-11-17 15:02:11'
        }
      ],
      counts: {},
      params: {
        width: 500
      },
      isLoading: false,
      openModal: false,
      expressCompanys: ['圆通速递', '韵达快递', '顺丰速运', '申通快递'],
      formData: {
        company: '',
        no: ''
      },
      validationRules: {
        rules: {},
        required: ['company', 'no']
      },
      loading: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getData();
    },
    changePage() {
      this.getData(true);
    },
    closeHandle() {
      this.openModal = false;
    },
    submit() {
      this.openModal = true;
    },
    copyOrderInfo(info) {
      clipboard({
        text: info
      });
    },
    openDetail(data) {
      console.log(data);
      this.$router.push({ name: 'OrderDetail', params: { no: data.no } });
    },
    openEdit(data) {
      this.openModal = true;
      console.log(data);
    },
    getData(reload = false) {
      if (reload) {
        this.pagination.page = 1;
      }
      //   this.loading = true;
      //   setTimeout(() => {
      //     this.datas = [
      //       { name: 'Dakota Rice', salary: '$36,738', country: 'Niger', city: 'Oud-Turnhout' },
      //       { name: 'Minerva Hooper', salary: '$23,789', country: 'Curaçao', city: 'Sinaai-Waas' },
      //       { name: 'Sage Rodriguez', salary: '$56,142', country: 'Netherlands', city: 'Baileux' },
      //       { name: 'Philip Chaney', salary: '$38,735', country: 'Korea, South', city: 'Overland Park' },
      //       { name: 'Doris Greene', salary: '$63,542', country: 'Malawi', city: 'Feldkirchen in Kärnten' },
      //       { name: 'Mason Porter', salary: '$78,615', country: 'Chile', city: 'Gloucester' },
      //       { name: 'Dakota Rice', salary: '$36,738', country: 'Niger', city: 'Oud-Turnhout' },
      //       { name: 'Minerva Hooper', salary: '$23,789', country: 'Curaçao', city: 'Sinaai-Waas' },
      //       { name: 'Sage Rodriguez', salary: '$56,142', country: 'Netherlands', city: 'Baileux' },
      //       { name: 'Philip Chaney', salary: '$38,735', country: 'Korea, South', city: 'Overland Park' },
      //       { name: 'Doris Greene', salary: '$63,542', country: 'Malawi', city: 'Feldkirchen in Kärnten' },
      //       { name: 'Mason Porter', salary: '$78,615', country: 'Chile', city: 'Gloucester' }
      //     ];
      //     this.pagination.total = 100;
      //     this.loading = false;
      //   }, 1000);
    }
  },
  computed: {}
};
</script>
